iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0

想必大家都有過這種經驗

下班後小睡一下....就忘記發文了

........

所以,來做個提醒工具吧~

使用套件

@react-native-community/push-notification-ios
react-native-push-notification
react-native-background-fetch

https://ithelp.ithome.com.tw/upload/images/20200923/20104220Y0gswXqPei.png

https://ithelp.ithome.com.tw/upload/images/20200923/20104220QbtrnXgKbf.png

            <Modal
                popup
                style={styles.popupView}
                title="visible_WEB_popup"
                visible={this.state.visible_time_popup}
                animationType="slide-up"
                onClose={() => { this.setState({ visible_WEB_popup: false, }); }}
                footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.setState({ visible_WEB_popup: false, }); } }]}
                maskClosable={true}>
                <View style={styles.modalOpet}>
                  <TouchableOpacity
                    style={{ flexDirection: "column",   borderTopLeftRadius: 20, backgroundColor: "#fa507b", flex: 1 }}
                
                    onPress={async () => {
                      this.setState({
                        visible_time_popup: false,
                      });
                    }}>
                    <Text style={styles.modalTXT}>close modal</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={{ flexDirection: "column", backgroundColor: "#122244", flex: 1 }}
                    onPress={async () => {
                      this.setState({
                        visible_time_popup: false,
                      });
                    }}>
                    <Text style={styles.modalTXT}>立即發布</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={{ flexDirection: "column",  borderTopRightRadius: 20, backgroundColor: "#50d3fa", flex: 1 }}
                    onPress={async () => {
                      await this.push_FCM_time();
                      this.setState({
                        visible_time_popup: false,
                      });
                    }}
                  >
                    <Text style={styles.modalTXT}>set time & close modal</Text>
                  </TouchableOpacity>
                </View>
                <View style={{ paddingVertical: 20, paddingHorizontal: 20 }}>
                  <Text style={{ margin: 16 }}>use24Hours</Text>
                  <DatePickerView
                    value={this.state.value24hours}
                    onChange={v => {
                      this.setState({ value24hours: v })
                      console.warn(this.state.value24hours)
                    }}
                  />

                </View>

              </Modal>
PushNotification.configure({
      onRegister: function (token) {
        console.log('TOKEN:', token);
        if (token.os == "ios") {
          console.log('TOKEN:', token.os);
  
        } else if (token.os == "android") {
          console.log('TOKEN:', token.os);
        }
      }.bind(this),
      onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
        console.log('NOTIFICATION DATA:', notification.data);
        if (notification.data != null) {
          console.log('NOTIFICATION DATA:', notification.data);
        }
      },
      onAction: function (notification) {
        console.log("ACTION:", notification.action);
        console.log("NOTIFICATION inAction:", notification);
      }, onRegistrationError: function (err) {
        console.error(err.message, err);
      }, 
      permissions: {
        alert: true,
        badge: true,
        sound: true,
      },
      popInitialNotification: true,
      requestPermissions: true,
    });
    PushNotification.localNotificationSchedule({
     message: "My button Notification Message" + new Date(this.state.time), 
      date: new Date(this.state.APN_time), 
      allowWhileIdle: false, 
    });


上一篇
[Day:8] ( •́ _ •̀)?為什麼我可以用手機在Bar發文( •́ _ •̀)?
下一篇
[Day:10] 今晚,我想來點不一樣的聲音(*ˇωˇ*人)
系列文
ReactNative 懶人開發之路,薪水小偷練成日記(X31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言